<template>
    <el-col :span="8" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px'}" v-loading="loading">
            <template #header>
                <span>添加海报</span>
            </template>
            <!-- card body -->
            <el-form :model="adv" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" label-position="left">
                <el-form-item label="图片" class="add-input" >
                    <el-input v-model="adv.image" placeholder="上传或链接" size="small" clearable>
                        
                    </el-input>
                    <el-upload
                    action="http://localhost/api/upload"
                    :on-remove="handleRemove"
                    :on-success="handleUploadSuccess"
                    >
                        <el-button type="text" size="large">
                            <i class="el-icon-upload"></i>
                        </el-button>
                        <template #tip>只能上传图片，不能超过1M</template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="跳转链接" size="small" clearable class="add-input">
                    <el-input v-model="adv.image_url" placeholder="海报点击跳转链接" size="small" clearable ></el-input>
                </el-form-item>
                <el-form-item label="图片描述" size="small" clearable class="add-input">
                    <el-input v-model="adv.alt" placeholder="海报alt" size="small" clearable ></el-input>
                </el-form-item>
                
               <div style="text-align: center">
                    <el-button type="success" @click="onSubmit" size="small">立即创建</el-button>
                    <el-button type="danger" size="small">取消</el-button>
               </div>
            </el-form>
            
        </el-card>
    </el-col>
</template>

<script>
import { adminImg } from '@/api/content.js'
import { mapMutations } from 'vuex';

export default {
    name: "AdvAdd",
    data(){
        return {
            adv: {
                image: "",
                image_url: "",
                oss_filename: "",
                alt: "广告",
            },
            loading: false,
           
        }
    },
    methods: {
        ...mapMutations('ai',[
            'pushAdv'
        ]),
        async onSubmit(){
            this.loading = true
            if(this.adv.image == "" || this.adv.image_url == ""){
                this.$message({
                    showClose: true,
                    message: "信息未填写完整",
                    type: 'error'
                });
                this.loading = false
                return
            }
            let data = await adminImg.adv.add(this.adv);
            this.loading = false
            if (data.adv != "" || data.adv != undefined){
                this.pushAdv(data.adv)
                this.adv.image = ""
                this.adv.image_url = ""
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: '添加成功'
                })
            }else{
                this.$message({
                    showClose: true,
                    type: 'error',
                    message: '添加失败'
                })
            }
        },
        
        handleUploadSuccess(response){
            if(response.status == 200){
                this.$message({
                    showClose: true,
                    message: "上传成功",
                    type: 'success'
                });
                this.adv.image = response.url
                this.adv.oss_filename = response.oss_filename
            }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
                });
            }
        },
        handleRemove(){
            this.adv.image = ""
        }
    }
}
</script>

<style lang="scss" scoped>
.add-input {
    width: 80%;
}
</style>